<template>
  <button @click="show = !show">点击切换（v-if</button>
  <transition name="fade">
    <div v-if="show" class="box">盒子</div>
  </transition>
</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    const show = ref(false)
    return { show }
  }
}
</script>

<style scoped>
.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: all 1s;
}
.fade-enter-to {
  opacity: 1;
}
.fade-leave-from {
  opacity: 1;
}
.fade-leave-active {
  transition: all 1s;
}
.fade-leave-to {
  opacity: 0;
}
.box {
  background-color: rgb(133, 253, 149);
  height: 200px;
  width: 200px;
}
</style>
